<template>
  <!-- 坐席话务报表 -->
  <div class="seatsCall">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="deptId" label="组织">
            <SearchSelectPicker
              url="/call-center/api/v1/departmentInfo/page"
              lable-name="deptName"
              :value.sync="formData.deptId"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="groupId" label="业务组">
            <SearchSelectPicker
              url="/call-center/api/v1/businessGroup/page"
              lable-name="groupName"
              :value.sync="formData.groupId"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="accountNo" label="坐席">
            <SearchSelectPicker
              url="/call-center/api/v1/staffInfo/page"
              placeholder="请选择执行坐席"
              value-name="accountNo"
              lable-name="staffName"
              :value.sync="formData.accountNo"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="queryDate" label="统计周期">
            <el-date-picker
              v-model="formData.queryDate"
              type="daterange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <Button @click="$refs.form.resetFields()">重置</Button>
            <ExportPane :table-config="tableConfig" :query-data-fun="queryHandle" filename="话务报表">导出</ExportPane>
            <Button type="primary" @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="table" no-request :other-filters="otherFilters" :table-config="tableConfig"></table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import ExportPane from '@/components/ExportPane'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { filtersRaw } from '@/utils'
export default {
  name: 'ReportFormSeatsCall',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker,
    ExportPane
  },
  data() {
    return {
      formData: {},
      formRules: {
        queryDate: {
          required: true,
          message: '请选择统计周期',
          trigger: 'blur'
        }
      },
      pickerOptions: {
        disabledDate: curDate => {
          const _timestamp = curDate.getTime()
          const n = new Date()
          const timestamp = n.getTime()
          if (_timestamp > timestamp) {
            return true
          }

          const year = n.getFullYear()
          const month = n.getMonth()
          let monthSubTwo = month - 2
          if (monthSubTwo >= 0) {
            return new Date(`${year}/${monthSubTwo + 1}/1 00:00:00`) > _timestamp
          }
          monthSubTwo = 12 + monthSubTwo
          return new Date(`${year - 1}/${monthSubTwo + 1}/1 00:00:00`) > _timestamp
        }
      },
      otherFilters: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/report/agent/page',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            prop: 'staffName',
            label: '坐席',
            minWidth: 100
          },
          {
            prop: 'callCount',
            label: '话务量',
            minWidth: 90
          },
          {
            prop: 'callInCount',
            label: '呼入量',
            minWidth: 90
          },
          {
            prop: 'avgCallInTime',
            label: '平均呼入时长(秒)',
            minWidth: 140
          },
          {
            prop: 'callOutCount',
            label: '呼出量',
            minWidth: 90
          },
          {
            prop: 'avgCallOutTime',
            label: '平均呼出时长(秒)',
            minWidth: 140
          },
          {
            prop: 'callOutMissedCount',
            label: '呼出未接量',
            minWidth: 120
          },
          {
            prop: 'muteCount',
            label: '静音次数',
            minWidth: 100
          },
          {
            prop: 'satisfactionInviteCount',
            label: '满意度邀请量',
            minWidth: 120
          },
          {
            prop: 'evaluateCount',
            label: '评价量',
            minWidth: 90
          },
          {
            prop: 'satisfactionCount',
            label: '满意量',
            minWidth: 90
          },
          {
            prop: 'generalCount',
            label: '一般满意量',
            minWidth: 110
          },
          {
            prop: 'displeasureCount',
            label: '不满意量',
            minWidth: 100
          },
          {
            prop: 'satisfactionRate',
            label: '满意度百分比',
            minWidth: 120,
            formatData: val => {
              return val.satisfactionRate !== undefined ? val.satisfactionRate + '%' : ''
            }
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    // 根据条件查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const list = []
        for (const i in this.formData) {
          if (i === 'queryDate') {
            if (this.formData[i] && this.formData[i].length) {
              list.push(filtersRaw(i, this.formData[i][0], '>='))
              list.push(filtersRaw(i, this.formData[i][1], '<='))
            }
          } else {
            if (this.formData[i] || this.formData[i] === 0) {
              list.push(filtersRaw(i, this.formData[i], '='))
            }
          }
        }
        this.otherFilters = list
        if (this.otherFilters.length <= 0) {
          this.$message.warning('请选择筛选条件!')
          return
        }
        if (!this.otherFilters.some(e => e.property === 'queryDate')) {
          this.$message.warning('请选择统计周期!')
          return
        }
        // return
        if (type !== 'export') {
          this.$nextTick(() => {
            this.$refs.table.initTableData()
          })
        }
        return list
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
